// 导入vue 和vuex状态机
// vue Vuex都是小写
import Vue from 'vue';
import Vuex from 'Vuex';
// 将状态机挂载到vue上
Vue.use(Vuex);
//创建Vuex对象 ：仓库
const store = new Vuex.Store({
    state: {
        //存放的键值对就是要管理的状态  公共数据
        // 存放的键值对就是要管理的状态  等同于data
        name: '李寻欢',
        num: 10,
        grades: []
    },
    //等同于计算属性 computed  很少用，一般是将数据拿到组件中去计算
    getters: {
        //第一个参数必须是state
        power(state) {
            return Math.pow(state.num, 2);
        }
    },
    //类似于methods函数  这些方法是用来修改state，而且不能是异步的，例如axios代码
    mutations: {
        //参数必须是state
        add(state) {
            state.num += 1;
        },
        //参数2是用户传递的数据 给state中的属性赋值
        setGrades(state, data) {
            state.grades = data;
        },
        //参数2是用户传递的数据 给state中的属性赋值
        setNum(state, data) {
            state.num = data;
        }
    },
    //专门用于编写异步方法，所有组件都可以使用
    // 通常用来发送异步请求获取到数据，然后调用mutations中的相关方法给属性赋值
    actions: {
        //参数是当前store对象本身
        getData(context) {
            //1.发送请求获取数据    假设获取到后台数据
            const grades = [98, 89, 88];
            //2.获取到数据之后，只能通过mutations中的方法给属性赋值
            context.commit('setGrades', grades);
        }
    }
});

//导出仓库
export default store;